<template>
    <div class="manage">
        <el-card class="top clearfix">
            <div class="btn_div fr">
                <el-button type="primary">excel导入</el-button>
                <el-button type="success">excel导出</el-button>
            </div>
        </el-card>
        <el-card class="section">
             <el-table :data="tableData" style="width: 100%">
                <el-table-column fixed type="index" label="#" width="60px" />
                <el-table-column align="center" prop="username" label="姓名" />
                <el-table-column align="center" prop="mobile" label="联系方式" />
                <el-table-column align="center" label="头像">
                     <template #default="{row}">
                         <img :src="row.avatar" alt="">
                     </template>
                </el-table-column>
                <el-table-column align="center" label="角色" >
                    <template #default="{row}">
                        <el-tag>{{row.role[0].title}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="开通时间">
                    <template #default="{row}">
                        {{$filters.formatTime(row.openTime)}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                <template #default>
                    <el-button link type="primary" size="small" @click="handleClick"
                    >查看</el-button
                    >
                    <el-button link type="primary" size="small">角色</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-model:currentPage="params.page"
                v-model:page-size="params.size"
                :page-sizes="[2, 5, 10, 25]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </el-card>
    </div>
</template>
<script setup>
import {ref,reactive,onMounted} from 'vue';
import { GetUser } from '@/utils/user.js';
const tableData = ref([]);
const total = ref(0);
const params = reactive({
    page:1,
    size:2
})
const getUserList = async ()=>{
    let data = await GetUser(params);
    console.log(data);
    if(data.code == 200){
    tableData.value = data.data.list;
    total.value = data.data.total;
    }
}
const handleSizeChange = val => {
//   console.log(`${val} items per page`)
    params.size = val;
    getUserList();
}
const handleCurrentChange = val => {
//   console.log(`current page: ${val}`)
    params.page = val;
    getUserList();
}
onMounted(() => {
  getUserList();  
})

</script>
<style lang="scss" scoped>
    .top{
        margin-bottom: 20px;
        height: 70px;
    }
    .section{
        img{
            width: 80px;
            border-radius: 50%;
        }
    }
</style>